<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <section>
      <ul>
       
          <router-link :to="'/detail/'+recommend.id" tag="li"
            v-for="recommend in recommendList"
            :key="recommend.id"
            class="recommendList"
          >
            <figure>
              <img :src="recommend.imgUrl" class="recommendimg" />
              <figcaption>
                <h2 class="title">{{ recommend.title }}</h2>
                <span class="content">{{ recommend.desc }}</span>
              </figcaption>
            </figure>
          </router-link>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: "HomeRecommend",
  props: {
    recommendList: Array,
  },
};
</script>

<style lang="scss" scoped>
@import "~styles/minin";
.recommend-title {
  text-indent: 0.2rem;
  color: #333;
  font-size: 0.2rem;
  background-color: #eee;
  line-height: 0.6rem;
}

.recommendList {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  figure {
    display: flex;
    height: 1.8rem;
    .recommendimg {
      @include wh(1.4rem, 1.4rem);
      padding: 0.2rem;
    }
    figcaption {
      margin: 0.2rem 0.1rem;
      min-width: 0;
      .title {
        font-size: 0.3rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .content {
        display: block;
        margin: 0.1rem 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>